import React, { useEffect, useState } from "react";
import { Table, Tag, Button, Modal, Popover, Switch } from "antd";
import axios from "axios";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined
} from "@ant-design/icons";
const { confirm } = Modal;

export default function RightList() {
  const [dataSource, setdataSource] = useState([]);
  useEffect(() => {
    axios.get("/rights?_embed=children").then(({ data }) => {
      data.forEach(v => {
        if (v.children.length === 0) v.children = "";
      });
      setdataSource(data);
    });
  }, []);
  const onChange = item => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    if (item.grade === 1) {
      setdataSource([...dataSource]);
      axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      });
    } else {
      const list = dataSource.find(v => v.id === item.rightId);
      list.children.forEach(v => {
        if (v.id === item.id) {
          v.pagepermisson = item.pagepermisson;
        }
      });
      setdataSource([...dataSource]);
      axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      });
    }
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: id => <b>{id}</b>
    },
    {
      title: "权限名称",
      dataIndex: "title"
    },
    {
      title: "权限路径",
      dataIndex: "key",
      render(key) {
        return <Tag color="blue">{key}</Tag>;
      }
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Button
              danger
              icon={<DeleteOutlined />}
              shape="circle"
              size="large"
              style={{ marginRight: "10px" }}
              onClick={() => showDelConfirm(item)}
            />
            <Popover
              content={
                <Switch
                  checked={item.pagepermisson}
                  onChange={() => onChange(item)}
                />
              }
              title="页面配置项"
              trigger={item.pagepermisson === undefined ? "" : "click"}
            >
              <Button
                type="primary"
                icon={<EditOutlined />}
                shape="circle"
                size="large"
                disabled={item.pagepermisson === undefined}
              />
            </Popover>
          </div>
        );
      }
    }
  ];
  function showDelConfirm(item) {
    confirm({
      title: "您确定删除该权限吗?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        if (item.grade === 1) {
          const list = dataSource.filter(row => row.id !== item.id);
          setdataSource(list);
          axios.delete(`/rights/${item.id}`);
        } else {
          const list = dataSource.find(row => row.id === item.rightId);
          list.children = list.children.filter(v => v.id !== item.id);
          setdataSource([...dataSource]);
          axios.delete(`/children/${item.id}`);
        }
      },
      onCancel() {}
    });
  }
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={{ pageSize: 5 }}
    />
  );
}
